<template>
  <view class="page">
    <uni-nav-bar
      title="雪王礼品卡"
      left-icon="left"
      showMenuButtonWidth
      statusBar
      backgroundColor="#fff"
      :border="false"
      color="#333"
      @clickLeft="$tools.back"
    />
    <nav-tab
      :items="tabList"
      v-model="currentTab"
      @change="handleTabChange"
    />
    <!-- 购买礼品卡 -->
    <scroll-view
      :style="{ height: giftCardScrollHeight + 'px' }"
      scroll-y
      v-if="currentTab === 0"
    >
      <view class="giftcard-content">
        <view class="giftcard-header">
          <view class="giftcard-header-title">选购礼物</view>
          <view class="giftcard-header-desc">选择电子礼品卡图案</view>
        </view>
        <view class="giftcard-tag">选择卡面</view>
        <view class="giftcard-list">
          <view
            class="giftcard-item"
            v-for="item in cardFaceList"
            :key="item.templateId"
            @tap="goToGiftCardDetail(item)"
          >
            <image
              :src="item.cardFaceImage"
              class="giftcard-item-image"
              mode="widthFix"
            />
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 我的礼品卡 -->
    <scroll-view
      :style="{ height: myGiftCardScrollHeight + 'px' }"
      scroll-y
      v-if="currentTab === 1"
    >
      <view class="mycard-content">
        <view class="mycard-bar">
          <view class="d-flex items-center">
            <image
              src="/pages/marketing/static/giftcard/exchange-icon.png"
              class="mycard-bar-icon"
            />
            <view>兑换礼品卡</view>
          </view>
          <uni-icons
            type="right"
            size="14"
            color="#333"
          />
        </view>
        <view
          class="mycard-empty"
          v-if="myCardList.length === 0"
        >
          <image
            src="/pages/marketing/static/giftcard/empty.png"
            class="mycard-empty-bg"
          />
          <view class="mycard-empty-text">暂无礼品卡~</view>
        </view>
      </view>
    </scroll-view>
    <view
      class="mycard-footer"
      v-if="currentTab === 1"
    >
      <view class="mycard-footer-left">
        <view class="mycard-footer-left-item">
          <image
            src="/pages/marketing/static/giftcard/buy_record.png"
            class="mycard-footer-left-item-icon"
          />
          <view>购买记录</view>
        </view>
        <view class="mycard-footer-left-item">
          <image
            src="/pages/marketing/static/giftcard/delivery_records.png"
            class="mycard-footer-left-item-icon"
          />
          <view>收送记录</view>
        </view>
        <view class="mycard-footer-left-item">
          <image
            src="/pages/marketing/static/giftcard/batch_gift.png"
            class="mycard-footer-left-item-icon"
          />
          <view>批量赠送</view>
        </view>
      </view>
      <view
        class="mycard-footer-btn"
        @tap="goToBuyGiftCard"
        >购买新的礼品卡</view
      >
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex"
export default {
  name: "GiftCard",
  data() {
    return {
      giftCardScrollHeight: 0,
      myGiftCardScrollHeight: 0,
      tabList: ["购买礼品卡", "我的礼品卡"],
      currentTab: 0,
      myCardList: []
    }
  },
  computed: {
    ...mapState('giftCard', ['cardFaceList'])
  },
  onLoad() {
    this.giftCardScrollHeight =
      uni.getSystemInfoSync().windowHeight -
      uni.getSystemInfoSync().statusBarHeight -
      44 -
      uni.upx2px(72)
    this.myGiftCardScrollHeight =
      uni.getSystemInfoSync().windowHeight -
      uni.getSystemInfoSync().statusBarHeight -
      44 -
      uni.upx2px(172)
  },
  methods: {
    handleTabChange() {},
    goToGiftCardDetail(item) {
      uni.navigateTo({
        url: `/pages/marketing/gift-card-detail/gift-card-detail?templateId=${item.templateId}`
      })
    },
    goToBuyGiftCard() {
      this.currentTab = 0
    }
  }
}
</script>
<style lang="scss" scoped>
page {
  background-color: #f4f4f7;
}
.giftcard {
  &-content {
    background-color: #fff;
    padding: 0 $uni-spacing-row-xl $uni-spacing-row-xl;
  }
  &-header {
    display: flex;
    align-items: flex-end;
    padding: $uni-spacing-row-xl 0;

    &-title {
      font-size: $uni-font-size-xl;
      font-weight: bold;
      margin-right: $uni-spacing-row-sm;
    }

    &-desc {
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
    }
  }

  &-tag {
    width: 170rpx;
    height: 70rpx;
    background-color: rgba($uni-color-primary, 0.1);
    color: $uni-color-primary;
    border: 1px solid $uni-color-primary;
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $uni-font-size-base;
    margin-bottom: $uni-spacing-row-xl;
  }

  &-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $uni-spacing-row-lg;
  }

  &-item {
    width: 333rpx;
    border-radius: $uni-border-radius-xl;
    background-color: #fff;

    &-image {
      width: 100%;
      border-radius: $uni-border-radius-xl;
    }
  }
}

.mycard {
  &-content {
    padding: $uni-spacing-row-xl;
  }

  &-bar {
    width: 100%;
    height: 90rpx;
    background-color: #fff;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: $uni-spacing-row-xl;
    padding: 0 45rpx;
    color: $uni-color-primary;
    font-size: $uni-font-size-base;

    &-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: $uni-spacing-row-sm;
    }
  }

  &-empty {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &-bg {
      width: 486rpx;
      height: 483rpx;
    }

    &-text {
      font-size: $uni-font-size-base;
      color: $uni-text-color-grey;
    }
  }

  &-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    height: 100rpx;
    display: flex;
    align-items: center;

    &-left {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: $uni-font-size-sm;
        color: $uni-text-color;

        &-icon {
          width: 36rpx;
          height: 37rpx;
          margin-bottom: $uni-spacing-row-sm;
        }
      }
    }

    &-btn {
      width: 300rpx;
      height: 90rpx;
      margin: 0 $uni-spacing-row-xl;
      background-color: $uni-color-primary;
      color: #fff;
      font-size: $uni-font-size-lg;
      font-weight: bold;
      border-radius: $uni-border-radius-xl;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
